<template>
	<div>
		<div ref="myEcharts" class="chartsBox"></div>
		<div ref="myEcharts2" class="chartsBox"></div>
		<div ref="myEcharts3" class="chartsBox"></div>
		<div ref="myEcharts4" class="chartsBox"></div>
		<div class="tableBox">
			<div style="margin-left: 6%;font-size:18px;font-weight: bold;">告警信息</div>			
			<div style="width: 95%;margin: 15px auto;">
				<template>
					<el-table :data="alertList" style="width: 100%" height="250" border :cell-style="rowClass">
						<el-table-column type="index" width="50" fixed label="序号" align="center">
						</el-table-column>
						<el-table-column prop="type" label="系统类型" width="80" align="center">
						</el-table-column>
						<el-table-column prop="alertLevel" label="告警级别" width="80" align="center">
							<template slot-scope="scope">
								<div v-if="scope.row.alertLevel == 1">
									<div class="tipBox1">提醒</div>
								</div>
								<div v-if="scope.row.alertLevel == 2">
									<div class="tipBox2">普通</div>
								</div>
								<div v-if="scope.row.alertLevel == 3">
									<div class="tipBox3">紧急</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="infotype" label="信息类型" width="150" align="center">
						</el-table-column>
						<el-table-column prop="alertinfo" label="告警信息" width="150" align="center">
						</el-table-column>
						<el-table-column prop="recordTime" label="录入时间" width="135" align="center">
							<template slot-scope="scope">
								{{changeTime(scope.row.recordTime)}}
							</template>
						</el-table-column>
						<el-table-column prop="servicesname" label="业务系统名" width="100" align="center">
						</el-table-column>
						<el-table-column prop="systemname" label="系统名称" width="100" align="center">
						</el-table-column>
						<!-- <el-table-column prop="monObject" label="告警对象" width="100" align="center">
						</el-table-column> -->
					</el-table>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			getData: {
				type: Object,
			},
		},
		data() {
			return {
				networkList: [],
				baseImg:[],
				cpuList: [],
				memoryList: [],
				timeList: [],
				myChart: null,
				urlList: [],
				toopList: [],
				alertList: []
			}
		},
		created() {

		},
		mounted() {
			this.toop()
			this.createCharts()
			this.createCharts2()
			this.createCharts3()
			this.createCharts4()
			this.getUrlList()
		},
		methods: {
			toop() {
				// console.log('最后', this.getData)
				this.alertList = this.getData.alertList
			},
			changeTime(timestamp) {
				let date = new Date(parseInt(timestamp));
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
			},
			rowClass() {
				return 'text-align:center;color:black;'
			},
			headClass() {
				return 'text-align:center;color:#606266;'
			},
			async createCharts() {
				this.myChart = this.$echarts.init(this.$refs.myEcharts);
				const colors = ['#5ad8a6'];
				const option = {
					title: {
						text: 'CPU使用率',
						left: '5%',
						top: '5%'
					},
					color: colors,
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						formatter: function(params) {
							return params[0].axisValue + '</br>' +
								'CPU使用率：' + params[0].data + '%' + '</br>'
						}
					},
					legend: {},
					grid: {
						top: 70,
						bottom: 50
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLine: {
							onZero: false,
							lineStyle: {
								color: colors[0]
							}
						},
						data: this.getData.timeList
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: 'cpu使用率',
						type: 'line',
						smooth: true,
						Animation: false,
						// xAxisIndex: 1,
						smooth: true,
						emphasis: {
							focus: 'series'
						},
						data: this.getData.cpuList
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				this.myChart.setOption(option);
				this.myChart.on('finished', () => {
					const baseUrl = this.myChart.getDataURL()
					this.urlList.push({
						name:'cpu使用率',
						url:baseUrl
					})
				})
			},
			createCharts2() {
				let myChart = this.$echarts.init(this.$refs.myEcharts2);
				const colors = ['#5ad8a6'];
				const option = {
					title: {
						text: '内存使用率',
						left: '5%',
						top: '5%'
					},
					color: colors,
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						formatter: function(params) {
							
							return params[0].axisValue + '</br>' +
								'内存使用率：' + params[0].data + '%' + '</br>'
						}
					},
					legend: {},
					grid: {
						top: 70,
						bottom: 50
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLine: {
							onZero: false,
							lineStyle: {
								color: colors[0]
							}
						},
						data: this.getData.timeList
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '内存使用率',
						type: 'line',
						smooth: true,
						// xAxisIndex: 1,
						emphasis: {
							focus: 'series'
						},
						data: this.getData.memoryList
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				myChart.on('finished', () => {
					const baseUrl = myChart.getDataURL()
					this.urlList.push({
						name:'内存使用率',
						url:baseUrl
					})
				})
				// console.log(this.allData)
			},
			createCharts3() {
				let myChart = this.$echarts.init(this.$refs.myEcharts3);
				const colors = ['#5ad8a6'];
				const option = {
					title: {
						text: '网络流量',
						left: '5%',
						top: '5%'
					},
					color: colors,
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						formatter: function(params) {
							// console.log('params', params)
							return params[0].axisValue + '</br>' +
								'网络流量：' + (params[0].data).toFixed(2) + 'KB' + '</br>'
						}
					},
					legend: {},
					grid: {
						top: 70,
						bottom: 50
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLine: {
							onZero: false,
							lineStyle: {
								color: colors[0]
							}
						},
						data: this.getData.timeList
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '网络流量',
						type: 'line',
						// xAxisIndex: 1,
						smooth: true,
						emphasis: {
							focus: 'series'
						},
						data: this.getData.networkList
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
				myChart.on('finished', () => {
					const baseUrl = myChart.getDataURL()
					this.urlList.push({
						name:'网络流量',
						url:baseUrl
					})
				})
				// console.log(this.allData)
			},
			createCharts4() {
				let a = this.getData.ioIdle
				let myChart = this.$echarts.init(this.$refs.myEcharts4);
				const colors = ['#f39393'];
				const option = {
					title: {
						text: 'IO等待',
						left: '5%',
						top: '5%'
					},
					color: colors,
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						},
						formatter: function(params) {
							// console.log('params', params)
							return params[0].axisValue + '</br>' +
								'百分比：' + params[0].data + '%' + '</br>'
						}
					},
					legend: {},
					grid: {
						top: 70,
						bottom: 50
					},
					xAxis: [{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLine: {
							onZero: false,
							lineStyle: {
								color: colors[0]
							}
						},
						data: this.getData.timeList
					}],
					yAxis: [{
						type: 'value',
						// data:this.getData.ioList,
					}],
					series: [{
						name: '百分比',
						type: 'line',
						// xAxisIndex: 1,
						smooth: true,
						emphasis: {
							focus: 'series',
						},
						data: this.getData.ioList,
					}]
				};
				// 使用刚指定的配置项和数据显示图表。

				myChart.setOption(option);
				myChart.on('finished', () => {
					const baseUrl = myChart.getDataURL()
					this.urlList.push({
						name:'IO等待',
						url:baseUrl
					})
				})
				// console.log(this.allData)
			},
			getUrlList() {
				this.$emit('getUrl', this.urlList)
			},
			dataIsCheck(data) {
				console.log('确认数据', data)
				//确认是否有数据
				if (!data) {
					console.log('确认数据', data)
					// this.dataIsCheck()
				}
			}
		}
	};
</script>

<style scoped>
	.chartsBox {
		margin: 10px auto;
		width: 100%;
		height: 300px;
		background-color: white;
	}
	
	.tipBox1{
		margin: 0 auto;
		width: 50px;
		background-color: #67C23A;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		color: white;
	}
	
	.tipBox2{
		margin: 0 auto;
		width: 50px;
		background-color: #E6A23C;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		color: white;
	}
	
	.tipBox3{
		margin: 0 auto;
		width: 50px;
		background-color: #F56C6C;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		color: white;
	}

	.tableBox {
		margin: 10px auto;
		width: 100%;
		height: 300px;
		background-color: white;
	}
</style>
